<div class="tab-pane active" id="{uniqid()}">

  <input type="hidden" name="attr_id[]" value="{$attribute->id}" />

  <div class="control-group">
    <label for="name">Name</label>
    <input class="input-xlarge" name="attr_name[]" type="text" id="attr_name" value="{$attribute->name}" required="required" />
  </div>

  <div class="control-group">
    <label for="label">Label</label>
    <input class="input-xlarge" name="attr_label[]" type="text" value="{$attribute->label}" required="required" />
  </div>

  <div class="control-group">
    <label for="purposes">Purpose</label>
    <select id="purposes"  name="purposes[]" class="input-xlarge" required="required">
       {foreach from=$purposes item="purpose"}
         {if $purpose->slug == $attribute->purpose}
           <option value="{$purpose->slug}" selected="selected">{$purpose->label}</option>
         {else}
           <option value="{$purpose->slug}">{$purpose->label}</option>
         {/if}
       {/foreach}
    </select>
  </div>

  <div class="control-group">
    <label for="rules">Rules</label>
    <input class="input-xlarge pw-attr-rules" name="attr_rules[]" type="text" value="{$attribute->rules}" />

    <select id="rules" name="rules" class="input-xlarge pw-rules">
      <option>Select a rule</option>
       {foreach from=$rules item="rule"}
       <option value="{$rule->name}">{$rule->name}</option>
       {/foreach}
    </select>

    <script>
      $('.pw-rules').change(function() {
        var selectedRule = $('.pw-attr-rules').val() + ", '" + this.options[this.selectedIndex].value + "'";
        $('.pw-attr-rules').val(selectedRule);
      });
    </script>

  </div>
  <!-- rules -->

  <button type="button" class="remove-attribute btn">Remove Attribute</button>

</div>
<!-- pane -->
